<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>资源配置</title>
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content">

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-6">

                    <div th:class="row">
                        <div class="col-sm-12">
                            <section class="panel">
                                <header class="panel-heading">
                                    资源配置 - 床位
                                    <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                                </header>
                                <div class="panel-body">
                                    <div class="panel">
                                        <div class="panel-body">
                                            <div class="row">

                                                <div class="col-sm-4 p-states">
                                                    <span class="state-title">全院床位  </span>
                                                    <h3 th:text="${dataModel.openBeds}" ></h3>
                                                </div>
                                                <div class="col-sm-4 p-states">
                                                    <span class="state-title">急诊留观床位  </span>
                                                    <h3 th:text="${dataModel.emergencyBeds}"></h3>
                                                </div>
                                                <div class="col-sm-4 p-states">
                                                    <span class="state-title">重症医学床位  </span>
                                                    <h3 th:text="${dataModel.icuBeds}"></h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="panel">
                                        <div class="panel-body">
                                            <div class="row">

                                                <div class="col-xs-8 p-states">
                                                    <span class="state-title">重症医学科床位占医院开放床位数的比例</span>
                                                    <h3 th:text="${#numbers.formatPercent(dataModel.icuBedsPercent, 1, 2)}"></h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </section>
                        </div>
                    </div>
                    <div th:class="row">
                        <div class="col-sm-12">
                            <section class="panel">
                                <header class="panel-heading">
                                    资源配置 - 人员
                                    <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                                </header>
                                <div class="panel-body">


                                    <div class="panel">
                                        <div class="panel-body">
                                            <div class="row">

                                                <div class="col-sm-6 p-states">
                                                    <span class="state-title">重症医学科医师数、护士数</span>
                                                    <h3 th:text="${dataModel.getMedicalStaff()}"></h3>
                                                </div>

                                                <div class="col-sm-6 p-states">
                                                    <span class="state-title">重症医学科医师数、护士数与床位数之比</span>
                                                    <h3 th:text="${'1 : '+ #numbers.formatDecimal(dataModel.getMedicalStaffProportion(),1,2)}"></h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </section>
                        </div>
                    </div>

                </div>

                <div class="col-sm-6">


                    <section class="panel">
                        <header class="panel-heading">
                            床位占比
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body" id="main" style="height:768px;">
                            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                        </div>
                    </section>
                </div>

            </div>

        </div>
        <!--body wrapper end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>


<script type="text/javascript">
    $(document).ready(function () {

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getResourceAllocationList",
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    //alert(JSON.stringify(result));
                    myChart.hideLoading();    //隐藏加载动画
                    const option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '床位类型',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: result
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + errorMsg);
                myChart.hideLoading();
            }
        });//end ajax

    });//刷新方法结束

</script>
</body>